<template>
  <el-container style="border: 1px solid rgb(230,230,230);margin-top: 30px;margin-bottom: 30px;">
    <!-- 侧边栏容器 -->
    <el-aside width="150px">
      <el-menu :default-active="activeIndex" class="el-menu-vertical-demo">
        <el-menu-item index="1" @click.native="redirect('/account')">
          <i class="el-icon-user"></i>
          <span>首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>
        </el-menu-item>
        <el-menu-item-group>
          <template slot="title">我的信息</template>
          <!-- <el-menu-item index="2" @click.native="redirect('/account/housing')">
            <i class="el-icon-office-building"></i>
            <span>我的昵称</span>
          </el-menu-item> -->
          <el-menu-item index="3" @click.native="redirect('/account/address')">
            <i class="el-icon-box"></i>
            <span>地址管理</span>
          </el-menu-item>
          <el-menu-item index="4" @click.native="redirect('/account/chgHeadImg')">
            <i class="el-icon-picture-outline"></i>
            <span>修改头像</span>
          </el-menu-item>
          <el-menu-item index="5" @click.native="redirect('/account/chgPwd')">
            <i class="el-icon-lock"></i>
            <span>修改密码</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">我的超市</template>
          <!-- <el-menu-item index="11" @click.native="redirect('/account/mySecondHand')">
            <i class="el-icon-shopping-bag-2"></i>
            <span>上传商品</span>
          </el-menu-item> -->
          <el-menu-item index="12" @click.native="redirect('/ShoppingBag')">
            <i class="el-icon-document"></i>
            <span>我的购物车</span>
          </el-menu-item>
          <el-menu-item index="13" @click.native="redirect('/orders')">
            <i class="el-icon-document"></i>
            <span>商品订单</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">便民服务</template>
          <el-menu-item index="7" @click.native="redirect('/serviceorder')">
            <i class="el-icon-house"></i>
            <span>服务订单</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">社区动态</template>
          <el-menu-item index="8" @click.native="redirect('/account/myNews')">
            <i class="el-icon-chat-square"></i>
            <span>我发布的</span>
          </el-menu-item>
          <el-menu-item index="10" @click.native="redirect('/account/complaintAdvice')">
            <i class="el-icon-edit-outline"></i>
            <span>投诉与建议</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </el-aside>

    <!-- 主要区域 -->
    <el-main style="border-left:1px solid rgb(230,230,230);">
      <!-- 展示路由页面 -->
      <router-view/>
    </el-main>

  </el-container>
</template>

<script>
  export default{
    data(){
      return {
        /* 菜单选择项，默认为1 */
        activeIndex: "1"
      }
    },
    methods: {
      /* 本跳转页面的统一方法 */
      redirect: function(view){
        this.$router.push(view)
      }
    },
    watch: {
	    //监听路由地址的改变，让刷新页面后，也能选择正确的菜单项
	    $route:{
        immediate: true,
        handler(newVal){
          if(newVal.path == "/account"){
            this.activeIndex = "1"
          }else if(newVal.path == "/account/housing"){
            this.activeIndex = "2"
          }else if(newVal.path == "/account/address"){
            this.activeIndex = "3"
          }else if(newVal.path == "/account/chgHeadImg"){
            this.activeIndex = "4"
          }else if(newVal.path == "/account/myNews"){
            this.activeIndex = "8"
          }else if(newVal.path == "/account/mySecondHand"){
            this.activeIndex = "11"
          }else if(newVal.path == "/ShoppingBag"){
            this.activeIndex = "12"
          }else if(newVal.path == "/orders"){
            this.activeIndex = "13"
          }else if(newVal.path == "/serviceorder"){
            this.activeIndex = "7"
          }
        }
	    }
	  },
    mounted() {
      /* 设置页面标题 */
      document.title="个人中心 - 汤臣一品便民服务中心"
    }
  }
</script>

<style scoped>
  .el-aside {
    height: 84vh;
    background-color: #ffffff;
    overflow-y: auto;
    -ms-overflow-style: none; /* Edge */
    scrollbar-width: none; /* Firefox */
  }
</style>
